export default [
  "number",
  "json",
  "string",
  "$ruler",
  "$getLoopColors",
  function ($number, $json, $string, $ruler, $getLoopColors) {
    return {
      attrs: {
        cx: $number(100),
        cy: $number(500),
        data: $json(),
        select: $string("-1"),
        dashSelect: $string("-1"),
      },
      region: {
        default: function (render, attr) {
          let xData = [];
          for (let item of attr.data[0].marks) {
            xData.push(item.name);
          }
          let index = 0;
          //绘制折线
          for (let item of attr.data) {
            let pain = render("" + index);
            pain.config({ lineWidth: 16 }).beginPath();
            for (let i = 0; i < item.marks.length; i++) {
              let point = {};
              point.x = attr.cx + (400 / (xData.length - 1)) * i;
              point.y = attr.cy - (item.marks[i].value / 100) * 400;
              pain.lineTo(point.x, point.y);
            }
            index++;
            pain.stroke();
          }
        },
        dashRect: function (render, attr) {
          let wid = 400 / 6;
          for (let i = 0; i < 7; i++) {
            render(i + "").fillRect(
              attr.cx - 0.5 * wid + i * wid,
              attr.cy - 400,
              wid,
              400
            );
          }
        },
      },
      link(painter, attr) {
        // console.log(this.select)
        let colors = $getLoopColors(attr.data.length, 1);
        //绘制x坐标
        let xData = [];
        for (let item of attr.data[0].marks) {
          xData.push(item.name);
        }
        let xOptios = {
          attr: {
            x: 100,
            y: 500,
            length: 400,
            value: xData,
          },
        };
        this.$reuseSeriesLink("ruler", xOptios);

        //绘制y坐标
        var rulerData = $ruler(100, 0, 9);
        let yOptions = {
          attr: {
            x: 100,
            y: 500,
            length: 400,
            value: rulerData.ruler,
            direction: "BT",
            "mark-direction": "left",
          },
        };
        this.$reuseSeriesLink("ruler", yOptions);
        let index = 0;
        //绘制折线
        for (let item of attr.data) {
          let config = {
            strokeStyle: colors[index],
          };
          if (attr.select == index) {
            config.lineWidth = 3;
          } else {
            config.lineWidth = 1;
          }
          painter.config(config).beginPath();
          for (let i = 0; i < item.marks.length; i++) {
            let point = {};
            point.x = attr.cx + (400 / (xData.length - 1)) * i;
            point.y = attr.cy - (item.marks[i].value / 100) * 400;
            painter.lineTo(point.x, point.y);
          }
          index++;
          painter.stroke();
        }
        index = 0;
        //绘制小圆球
        for (let item of attr.data) {
          painter.config({ fillStyle: "black" });
          for (let i = 0; i < item.marks.length; i++) {
            let point = {};
            point.x = attr.cx + (400 / (xData.length - 1)) * i;
            point.y = attr.cy - (item.marks[i].value / 100) * 400;
            painter.fillCircle(point.x, point.y, 3);
          }
          index++;
        }
        // for (let i = 0; i < 5; i++) {
        //   painter
        //     .config({ strokeStyle: "#d6d2d2ab",lineDash:[1]})
        //     .moveTo(attr.cx, attr.cy - 80 - 80 * i)
        //     .lineTo(attr.cx + 400, attr.cy - 80 - 80 * i)
        //     .stroke();
        // }
        //绘制虚线
        for (let i = 0; i < 7; i++) {
          if (i == attr.dashSelect) {
            // debugger
            painter
              .config({ lineDash: [15, 15], lineWidth: 2, strokeStyle: "gray" })
              .moveTo(attr.cx + i * (400 / 6), attr.cy)
              .lineTo(attr.cx + i * (400 / 6), attr.cy - 400)
              .stroke();
          }
        }
      },
    };
  },
];
